<meta title="淘宝物料配置" args="data"/>
<style>

</style>
<form class="form-horizontal" id="form" s="form,valid" style="width: 500px;">
    <table class="table table-bordered table-condensed table-striped">
        <thead>
        <tr>
            <th>名称</th>
            <th>ID</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody s="nda,loop" id="mappingList" s-data="data.materialList">
        <tr s-loop-role="empty">
            <td colspan="3" class="alert alert-warning">暂无数据</td>
        </tr>
        <tr s="row,datac" s-loop-role="row">
            <td>
                <input autocomplete="off" placeholder="物料名称" type="text" s-valid-error="require()" class="form-control name input-sm" name="name" />
            </td>
            <td>
                <input autocomplete="off" placeholder="物料id" type="text" s-valid-error="require()" class="form-control id input-sm" name="id" />
            </td>
            <td>
                <input autocomplete="off" type="button" s-click="del(this)" class="btn btn-sm btn-default" value="删除" />
            </td>
        </tr>
        </tbody>
        <tfoot>
        <tr class="form-inline">
            <td colspan="5">
                <input autocomplete="off" type="button" class="btn btn-sm btn-default" s-click="addNew()" value="新增" />
            </td>
        </tr>
        </tfoot>
    </table>
</form>
<script type="text/javascript">
    S.getContent = function () {
        var deferred = $.Deferred();
        $form.validate().done(function() {
            var obj = {
                materialList: []
            }
            var nameNodes = $form.node.find(".name");
            var idNodes = $form.node.find(".id");
            nameNodes.each(function(i) {
                obj.materialList.push({
                    name: $(this).val(),
                    id: idNodes.get(i).value
                })
            })
            deferred.resolve(obj)
        })
        return deferred;
    }
    function addNew() {
        $mappingList.addRow( {}, 'append')

    }
    function del($s) {
        $s.parent().node.remove();
    }
</script>